<template>
  <div class="medical-record">
    <!-- 左侧信息栏 -->
     <el-card style="height: 552px;width: 300px;">
        <div >
            <el-avatar :size="60" src="http://localhost:5203/Images/QQ_1761032347659.png"></el-avatar>
            <h3>{{ user.name }}&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" @click="goBack">返回</el-button></h3>
            <p>性别：{{ user.gender }}</p>
            <p>年龄：{{ user.age }}岁</p>
            <p>联系电话：{{ user.phone }}</p>
            <p>档案编号：{{ user.recordNo }}</p>
            <p class="disease">疾病：{{ user.diseases.join('、') }}</p>
        </div>
        <div class="service-overview">
            <h4>服务概况</h4>
            <p>签约日期：{{ user.service.contractDate }}</p>
            <p>到期日期：{{ user.service.expireDate }}</p>
            <p>签约团队：{{ user.service.team }}</p>
            <p>服务包：{{ user.service.package }}</p>
        </div>
     </el-card>
    <!-- 右侧标签页区域 -->
    <div class="right-content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础档案" name="basic">
          <!-- 基本信息 -->
          <el-card title="基本信息">
            <el-row :gutter="20">
              <el-col :span="12">
                <p>身份证号：{{ user.basic.idCard }}</p>
                <p>出生日期：{{ user.basic.birthday }}</p>
                <p>常住类型：{{ user.basic.residenceType }}</p>
                <p>婚姻状况：{{ user.basic.maritalStatus }}</p>
              </el-col>
              <el-col :span="12">
                <p>国籍：{{ user.basic.nationality }}</p>
                <p>民族：{{ user.basic.ethnicity }}</p>
                <p>文化程度：{{ user.basic.education }}</p>
                <p>职业：{{ user.basic.occupation }}</p>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="12">
                <p>血型：{{ user.basic.bloodType }}</p>
                <p>RH血型：{{ user.basic.rhBloodType || '无' }}</p>
              </el-col>
              <el-col :span="12">
                <p>参保情况：{{ user.basic.insurance }}</p>
              </el-col>
            </el-row>
          </el-card>

          <!-- 体征情况 -->
          <el-card title="体征情况" style="margin-top: 10px;">
            <el-row :gutter="20">
              <el-col :span="8">
                <p>身高：{{ user.physical.height }}</p>
              </el-col>
              <el-col :span="8">
                <p>体重：{{ user.physical.weight }}</p>
              </el-col>
              <el-col :span="8">
                <p>BMI：{{ user.physical.bmi }}</p>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="8">
                <p>是否吸烟：{{ user.physical.smoke ? '是' : '否' }}</p>
              </el-col>
              <el-col :span="8">
                <p>是否饮酒：{{ user.physical.drink ? '是' : '否' }}</p>
              </el-col>
              <el-col :span="8">
                <p>是否运动：{{ user.physical.exercise ? '是' : '否' }}</p>
              </el-col>
            </el-row>
          </el-card>

          <!-- 家族史 -->
          <el-card title="家族史" style="margin-top: 10px;">
            <el-table 
              :data="familyHistoryColumns" 
              border 
              style="width: 100%;"
              :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
            >
              <el-table-column prop="relation" label="关系" />
              <el-table-column prop="hypertension" label="高血压">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.hypertension" />
                </template>
              </el-table-column>
              <el-table-column prop="diabetes" label="糖尿病">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.diabetes" />
                </template>
              </el-table-column>
              <el-table-column prop="stroke" label="脑卒中">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.stroke" />
                </template>
              </el-table-column>
              <el-table-column prop="coronary" label="冠心病">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.coronary" />
                </template>
              </el-table-column>
              <el-table-column prop="copd" label="慢阻肺">
                <template #default="scope">
                  <el-checkbox v-model="scope.row.copd" />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="就诊记录" name="visit">
          <el-card title="就诊记录">
            <el-row :gutter="20" class="visit-records">
              <el-col :span="6" class="visit-filter">
                <div class="visit-counts">
                  <span class="filter-item" :class="{ active: visitCategory === '全部' }" @click="setCategory('全部')">全部 <span class="count">{{ totalCount }}次</span></span>
                  <span class="filter-item" :class="{ active: visitCategory === '住院' }" @click="setCategory('住院')">住院 <span class="count">{{ inHospitalCount }}次</span></span>
                  <span class="filter-item" :class="{ active: visitCategory === '门诊' }" @click="setCategory('门诊')">门诊 <span class="count">{{ outpatientCount }}次</span></span>
                </div>
                <ul class="date-range-list">
                  <li v-for="(range, idx) in dateRanges" :key="idx" @click="selectRange(range)" :class="{ active: selectedRange && selectedRange.label === range.label }">
                    <span class="dot" :class="{ primary: idx === 0 }"></span>
                    <span class="range-text">{{ range.label }}</span>
                  </li>
                </ul>
              </el-col>
              <el-col :span="18">
                <el-table :data="filteredVisitRecords" border style="width: 100%;" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
                  <el-table-column prop="type" label="就诊类型" width="120" />
                  <el-table-column prop="org" label="就诊机构" />
                  <el-table-column prop="diagnosis" label="诊断" />
                  <el-table-column prop="doctor" label="就诊医生" width="120" />
                  <el-table-column prop="time" label="就诊时间" width="200" />
                  <el-table-column label="操作" width="100">
                    <template #default>
                      <el-link type="primary">详情</el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="服务记录" name="service">
          <el-card title="服务记录" >
            <el-row :gutter="20" class="service-records">
              <el-col :span="6" class="service-filter">
                <ul class="category-list">
                  <li v-for="cat in serviceCategories" :key="cat.name" :class="{ active: selectedServiceCategory === cat.name }" @click="selectServiceCategory(cat.name)">
                    <span class="dot" :class="{ primary: selectedServiceCategory === cat.name }"></span>
                    <span class="category-text">{{ cat.name }}（{{ cat.count }}）</span>
                  </li>
                </ul>
              </el-col>
              <el-col :span="18">
                <el-table :data="filteredServiceRecords" border style="width: 100%;" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
                  <el-table-column prop="item" label="项目" width="160" />
                  <el-table-column prop="indicator" label="指标" width="160" />
                  <el-table-column prop="target" label="目标值" width="120" />
                  <el-table-column prop="recent" label="近期数据" />
                  <el-table-column prop="time" label="测量时间" width="200" />
                </el-table>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElAvatar, ElTabs, ElTabPane, ElCard, ElRow, ElCol, ElTable, ElTableColumn, ElCheckbox, ElLink } from 'element-plus';

const activeTab = ref('basic');

const goBack = () => {
    location.href = '/MyCsignView';
}

// 模拟前端数据（实际需通过axios从后端接口获取）
const user = ref({
  name: '张晓丽',
  gender: '男',
  age: 29,
  phone: '13030199209',
  recordNo: 'MB-100320012',
  diseases: ['高血压', '高血糖'],
  service: {
    contractDate: '2023-03-12',
    expireDate: '2025-03-12',
    team: '高血压管理团队',
    package: '高血压基础管理包'
  },
  basic: {
    idCard: '51390200109125328',
    birthday: '2000年1月1日',
    residenceType: '户籍',
    maritalStatus: '未婚',
    nationality: '中国',
    ethnicity: '汉族',
    education: '本科',
    occupation: '自由职业者',
    bloodType: 'O型',
    rhBloodType: '',
    insurance: '城镇职工基本医疗保险'
  },
  physical: {
    height: '185CM',
    weight: '64KG',
    bmi: 22.5,
    smoke: false,
    drink: false,
    exercise: false
  }
});

// 家族史表格数据
const familyHistoryColumns = ref([
  { relation: '父亲', hypertension: false, diabetes: false, stroke: false, coronary: false, copd: false },
  { relation: '母亲', hypertension: false, diabetes: false, stroke: false, coronary: false, copd: false }
]);

// 就诊记录模拟数据与筛选状态
const visitRecords = ref([
  { type: '住院', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' },
  { type: '门诊', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' },
  { type: '门诊', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' },
  { type: '门诊', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' },
  { type: '住院', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' },
  { type: '门诊', org: 'XX中心医院', diagnosis: '原发性高血压', doctor: '张三', time: '2023-01-12 10:12:20' }
]);
const visitCategory = ref('全部');
const dateRanges = ref([
  { label: '2022-01-12至2022-01-18', start: '2022-01-12', end: '2022-01-18' },
  { label: '2021-10-10至2021-10-17', start: '2021-10-10', end: '2021-10-17' }
]);
const selectedRange = ref(null);

const totalCount = computed(() => visitRecords.value.length);
const inHospitalCount = computed(() => visitRecords.value.filter(r => r.type === '住院').length);
const outpatientCount = computed(() => visitRecords.value.filter(r => r.type === '门诊').length);

const filteredVisitRecords = computed(() => {
  let list = [...visitRecords.value];
  if (visitCategory.value !== '全部') {
    list = list.filter(r => r.type === visitCategory.value);
  }
  if (selectedRange.value) {
    const s = new Date(selectedRange.value.start).getTime();
    const e = new Date(selectedRange.value.end).getTime();
    list = list.filter(r => {
      const t = new Date(r.time.replace(/-/g, '/')).getTime();
      return t >= s && t <= e;
    });
  }
  return list;
});

const setCategory = (cat) => { visitCategory.value = cat; };
const selectRange = (range) => { selectedRange.value = range; };

// 服务记录分类与数据
const selectedServiceCategory = ref('随访记录');
const serviceCategories = ref([
  { name: '随访记录', count: 5 },
  { name: '干预记录', count: 1 },
  { name: '评估记录', count: 1 }
]);

const serviceRecords = ref([
  { category: '随访记录', item: '血压', indicator: '收缩压/舒张压', target: '<140/90', recent: '135/85', time: '2023-01-12 10:12:20' },
  { category: '随访记录', item: '体重', indicator: 'BMI', target: '<24', recent: '22.5', time: '2023-01-12 10:12:20' },
  { category: '干预记录', item: '用药', indicator: '降压药', target: '规律用药', recent: '依从', time: '2023-01-12 10:12:20' },
  { category: '评估记录', item: '风险评估', indicator: '心血管风险', target: '低风险', recent: '低', time: '2023-01-12 10:12:20' }
]);

const filteredServiceRecords = computed(() => serviceRecords.value.filter(r => r.category === selectedServiceCategory.value));

const selectServiceCategory = (name) => { selectedServiceCategory.value = name; };


</script>

<style scoped>
.medical-record {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.left-sidebar {
  width: 240px;
}
.user-info {
  text-align: center;
  margin-bottom: 20px;
}
.user-info .disease {
  color: red;
}
.service-overview {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.right-content {
  flex: 1;
}

/* 就诊记录样式 */
.visit-records {
  margin-top: 10px;
}
.visit-filter {
  border-right: 1px solid #eee;
  padding-right: 12px;
}
.visit-counts {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.filter-item { cursor: pointer; color: #409EFF; }
.filter-item .count { color: #909399; margin-left: 4px; }
.filter-item.active { font-weight: 600; }
.date-range-list { list-style: none; padding: 0; margin: 0; }
.date-range-list li { display: flex; align-items: center; padding: 8px 0; cursor: pointer; }
.date-range-list li.active { color: #409EFF; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c0c4cc; margin-right: 8px; }
.dot.primary { background: #409EFF; }
.range-text { font-size: 13px; color: #606266; }
 
 /* 服务记录样式 */
 .service-records { margin-top: 10px; }
 .service-filter { border-right: 1px solid #eee; padding-right: 12px; }
 .category-list { list-style: none; padding: 0; margin: 0; }
 .category-list li { display: flex; align-items: center; padding: 8px 0; cursor: pointer; }
 .category-list li.active .category-text { color: #409EFF; font-weight: 600; }
 .category-text { font-size: 13px; color: #606266; }
 
 </style>